<template>
	<view class="mainPge">
		<headerPublic @backfn="backfn" style="position: fixed;" title="信访信息系统" />
		<view class="page-content">
			<view style="background-color: white; height: 40px;">
				<view class="example-body">
					<picker :range="years" v-model="selectedYearIndex" @change="onYearChange" mode="selector">
						<view class="picker-view">
							请选择年份：{{ selectedYear }}
						</view>
					</picker>
				</view>
			</view>
			<view class="background">
				<view style="height: 300px;padding-bottom: 50%;border-radius: 5px; margin: 5px;background-color: white;">
					<view id="XinfangChart"
						style=" height: 200px;border-radius: 5px; margin: 5px;background-color: rgb(255, 255, 255);"></view>
					<view id="XinfangPie" style="height: 80px;border-radius: 5px; margin: 5px;background-color: white;"></view>
				</view>
				<view id="AreaChart" style="height: 250px;border-radius: 5px;margin: 5px;background-color: white;"></view>
				<view
					style="height: 320px;border-radius: 5px;margin: 5px;padding: 5px;font-weight: bold;color: #5882fa;background-color: white;">
					司法救助情况
					<view
						style=" height: 150px; border-radius: 5px;margin: 5px 5px;text-align: center; font-weight: bold;line-height: 70px;color: #000;background-color: white;border: dodgerblue 2px solid;">
						司法救助案件<br /><text id="helpCase" style="font-size: 40px; color: #5882fa">{{helpData['sfjzaj']}}</text>件
					</view>
					<view
						style="height: 150px; border-radius: 5px;margin: 5px 5px;text-align: center;font-weight: bold;line-height: 70px; color: #000; background-color: white;border: dodgerblue 2px solid;">
						司法救助人数<br /><text id="helpPeople" style="font-size: 40px; color: #5882fa">{{helpData['sfjzrs']}}</text>人
					</view>
					<view
						style=" height: 150px;border-radius: 5px;margin: 5px 5px; text-align: center;font-weight: bold;line-height: 70px;color: #000;background-color: white;border: dodgerblue 2px solid; ">
						司法救助金额
						<br />
						<text id="helpValue" style="font-size: 40px; color: #5882fa">{{helpData['sfjzje']}}</text>万元
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		parseTime
	} from '@/utils/format'
	import {
		getSfssData
	} from '@/api/index.js'
	export default {
		name: 'pis',
		data() {
			return {
				// selectDate: null,
				years: [], // 年份列表
				selectedYearIndex: 0, // 默认选中的索引
				selectedYear: new Date().getFullYear(),
				xo: {
					year: new Date().getFullYear(),
					data: {},
					areaList: {},
					xingfangList: {}
				},
				helpData: {}
			}
		},
		mounted() {
			this.getData()
		},
		created() {
			// 生成2000-2030年的列表
			for (let i = 2000; i <= 2030; i++) {
				this.years.push(i);
			}
			// 默认选中当前年份
			const currentYear = new Date().getFullYear();
			this.selectedYearIndex = this.years.indexOf(currentYear);
		},
		methods: {
			getData() {
				getSfssData({
					year: this.xo.year
				}).then(response => {
					var responseObj = JSON.parse(response.data.body.ressfss)
					if (responseObj.result == "success") {
						this.xo.data = responseObj.data
						console.log(this.xo.data)
						this.xo.areaList = this.xo.data["dqAjPm"];

						this.helpData = this.xo.data.tjSfjz;
						// $(function() {
						// 	$("#helpCase").text(helpData['sfjzaj']);
						// 	$("#helpValue").text(helpData['sfjzje']);
						// 	$("#helpPeople").text(helpData['sfjzrs']);
						// })
						this.initAreaList()
						this.initXingfangList()
					}
				})
			},
			onYearChange(e) {
				this.selectedYear = this.years[e.detail.value];
				console.log(this.selectedYear);
				getSfssData({
					year: this.selectedYear.toString()
				}).then(response => {
					var responseObj = JSON.parse(response.data.body.ressfss)
					if (response.data.body.ressfss.indexOf('CANNOT') != -1) {
						uni.showToast({
							title: '当前年份数据不完整！',
							icon: 'none'
						})
						// ngDialog.alert("当前年份数据不完整！");
						// $("#datetimepicker1").val(currentYear) //可能需要修改
					} else if (responseObj.result == "success") {
						this.xo.data = responseObj.data
						console.log('time: ', this.xo.data)
						this.xo.areaList = this.xo.data["dqAjPm"];
						this.helpData = this.xo.data["tjSfjz"];
						this.refreshXingfangList()
						this.refreshAreaList()
					}
				})
			},
			refreshAreaList() {
				const AreaChart = this.$echarts.init(document.getElementById("AreaChart"));
				var optionArea = {
					title: {
						text: '区域排名',
						left: 'left',
						textStyle: {
							color: '#5882FA',
						},
						show: true,
					},
					grid: {
						height: '120',
					},
					xAxis: {
						type: 'category',
						data: this.dataArea(this.xo.areaList)[0],

						axisLabel: {
							interval: 0,
							fontSize: '10',
							formatter: function(value) {
								if (value.length > 5) {
									var valueStr = value;
									for (var i = 0; i < value.length / 2; i++) {
										valueStr = valueStr.slice(0, 3 * i + 2) + '\n' + valueStr.slice(3 * i + 2);
										console.log(valueStr);
									}
									return valueStr;
								}
								return value.split('').join('\n');
							}
						}
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: this.dataArea(this.xo.areaList)[1],
						type: 'bar'
					}]
				}
				// myAreaChart.setOption(optionArea);
				AreaChart.setOption(optionArea);
				// 根据页面大小自动响应图表大小
				window.addEventListener("resize", function() {
					AreaChart.resize();
				});
			},
			refreshXingfangList() {
				const XinfangChart = this.$echarts.init(document.getElementById("XinfangChart"));
				const XinfangPie = this.$echarts.init(document.getElementById("XinfangPie"));
				var xingfangList = this.xo.data["tjxfaj"];
				var optionXinfang = {
					title: {
						text: '信访事项统计',
						left: 'left',
						textStyle: {
							color: '#5882FA',
						},
						show: true,
					},
					tooltip: {
						formatter: '{a} <br/>{b} : {c}%'
					},
					series: [
						// left
						{
							name: 'gauge cases',
							type: 'gauge',
							radius: '80%',
							startAngle: 200,
							endAngle: -20,
							center: ['25%', '70%'],
							min: 0,
							max: Math.ceil(this.dataXinfangCases(xingfangList)["NUM"] / maxNum) * maxNum,
							axisLine: {
								lineStyle: {
									width: 15
								},
								color: ['#1E90FF'],
								roundCap: true
							},

							axisLabel: {
								formatter: function(value) {
									if (value % (maxNum / 5) === 0) {
										return '';
									}
									return value;
								}
							},

							splitLine: {
								show: false,
								length: 0,
								lineStyle: {
									width: 2,

								}
							},
							axisTick: {
								show: false
							},
							progress: {
								show: true,
								width: 15,
								itemStyle: {
									//color: '#fff'
								},
								roundCap: true
							},
							axisTick: {
								show: false
							},
							data: [{
								value: this.dataXinfangCases(xingfangList)["NUM"],
							}],
							detail: {

								fontSize: '10',
								formatter: function(value) {
									var rtn = this.dataXinfangCases(xingfangList)
									if (rtn.change == 'UP') {
										return '{value|' + value + '\n}信访案件同比上升' + this.dataXinfangCases(xingfangList)["percent"] +
											'%';
									} else if (rtn.change == 'DOWN') {
										return '{value|' + value + '\n}信访案件同比下降' + this.dataXinfangCases(xingfangList)["percent"] +
											'%';
									} else {
										return '数据无法比较';
									}
								},
								rich: {
									value: {
										fontSize: 20,
										fontWeight: 'bolder',
									},
									persent: {
										fontSize: 60,
										fontWeight: 'bolder',
									},

								}
							},
						},
						// right
						{
							name: 'gauge people',
							type: 'gauge',
							radius: '80%',
							min: 0,
							max: Math.ceil(this.dataXinfangCases(xingfangList)["NUM"] / maxNum) * maxNum,
							startAngle: 200,
							endAngle: -20,
							center: ['75%', '70%'],
							axisLine: {
								lineStyle: {
									width: 15
								},
								color: ['#1E90FF'],
								roundCap: true
							},
							axisLabel: {
								formatter: function(value) {
									if (value % (maxNum / 5) === 0) {
										return '';
									}
									return value;
								}
							},
							splitLine: {
								show: false,
								length: 0,
								lineStyle: {
									width: 2,

								}
							},
							axisTick: {
								show: false
							},
							progress: {
								show: true,
								width: 15,
								itemStyle: {
									//color: '#fff'
								},
								roundCap: true
							},
							axisTick: {
								show: false
							},

							detail: {

								fontSize: '10',
								formatter: function(value) {
									var rtn = this.dataXinfangPeaple(xingfangList)
									if (rtn.change == 'UP') {
										return '{value|' + value + '\n}信访人数同比上升' + this.dataXinfangPeaple(xingfangList)["percent"] +
											'%';
									} else if (rtn.change == 'DOWN') {
										return '{value|' + value + '\n}信访人数同比下降' + this.dataXinfangPeaple(xingfangList)["percent"] +
											'%';
									} else {
										return '数据无法比较';
									}
								},
								rich: {

									value: {
										fontSize: 20,
										fontWeight: 'bolder',
									},
									persent: {
										fontSize: 60,
										fontWeight: 'bolder',
									},


									a: {
										fontSize: 14,
										fontWeight: 800,
										fontFamily: "Arial",
										lineHeight: 22,
										color: '#fff',
										align: 'left'
									},
									b: {
										fontWeight: 600,
										fontFamily: "Arial",
										lineHeight: 22,
										color: '#fff',
										align: 'left'
									}
								}
							},
							data: [{
								value: this.dataXinfangPeaple(xingfangList)["NUM"],
							}]
						},

					]
				};

				var optionXinfangPie = {
					title: {
						text: '{a|其中}' + this.dataXinfangMax(xingfangList)[0].name + "{a|类型案件占比最大,约}" + this.dataXinfangMax(
								xingfangList)[0]
							.value + '{a|%}',
						top: 'center',
						right: '10%',
						show: true,
						textStyle: {
							color: 'orange',
							fontSize: 14,
							fontWeight: 'bolder',
							lineHeight: 10,
							rich: {
								a: {
									verticalAlign: 'center',
									color: 'black',
									fontWeight: 'normal',
									fontSize: 10,
									lineHeight: 10
								},
							}
						}
					},
					series: // 饼图
					{
						name: 'Max pie',
						type: 'pie',
						name: '访问来源',
						type: 'pie',
						radius: '50%',
						center: ['15%', '50%'],
						data: this.dataXinfangMax(xingfangList),
						label: {
							show: false,
							fontSize: '8',
							fontWeight: 'bold'
						},
						lableline: {
							show: false
						},
						emphasis: {
							label: {
								show: false,
								fontSize: '8',
								fontWeight: 'bold'
							},
							lableline: {
								show: false
							}
						},
					}
				}
				// myXinfangPie.setOption(optionXinfangPie);
				// myXinfangCharts.setOption(optionXinfang);
				XinfangChart.setOption(optionXinfang);
				XinfangPie.setOption(optionXinfangPie);
				// 根据页面大小自动响应图表大小
				window.addEventListener("resize", function() {
					XinfangChart.resize();
					XinfangPie.resize();
				});

			},
			dataXinfangCases(List) {
				var ReturnList = {
					NUM: List["xfajNum"],
					change: List["xfajTb"],
					percent: List["xfajMix"]
				}
				return ReturnList;
			},
			dataXinfangPeaple(List) {
				var ReturnList = {
					NUM: List["xfrNum"],
					change: List["xfrTb"],
					percent: List["xfrMix"]
				}
				return ReturnList;
			},
			dataXinfangMax(List) {
				var ReturnList = [];
				var ReturnItem = {
					value: List['maxSqlbMix'],
					name: List['maxSqlbName'],
				};
				var ReturnItem2 = {
					value: 100 - List['maxSqlbMix'],
					name: '其他',
				};
				ReturnList.push(ReturnItem);
				ReturnList.push(ReturnItem2);
				return ReturnList;
			},
			initXingfangList() {
				const XinfangChart = this.$echarts.init(document.getElementById("XinfangChart"));
				const XinfangPie = this.$echarts.init(document.getElementById("XinfangPie"));

				var xingfangList = this.xo.data["tjxfaj"];
				var optionXinfang = {
					title: {
						text: '信访事项统计',
						left: 'left',
						textStyle: {
							color: '#5882FA',
						},
						show: true,
					},
					tooltip: {
						formatter: '{a} <br/>{b} : {c}%'
					},
					series: [
						// left
						{
							name: 'gauge cases',
							type: 'gauge',
							radius: '80%',
							min: 0,
							max: Math.ceil(this.dataXinfangCases(xingfangList)["NUM"] / maxNum) * maxNum,
							startAngle: 200,
							endAngle: -20,
							center: ['25%', '70%'],
							axisLine: {
								lineStyle: {
									width: 15
								},
								color: ['#1E90FF'],
								roundCap: true
							},

							axisLabel: {
								formatter: function(value) {
									if (value % (maxNum / 5) === 0) {
										return '';
									}
									return value;
								}
							},

							splitLine: {
								show: false,
								length: 0,
								lineStyle: {
									width: 2,

								}
							},
							axisTick: {
								show: false
							},
							progress: {
								show: true,
								width: 15,
								itemStyle: {
									//color: '#fff'
								},
								roundCap: true
							},
							axisTick: {
								show: false
							},
							data: [{
								value: this.dataXinfangCases(xingfangList)["NUM"],
							}],
							detail: {

								fontSize: '10',
								formatter: function(value) {
									var rtn = this.dataXinfangCases(xingfangList)
									if (rtn.change == 'UP') {
										return '{value|' + value + '\n}信访案件同比上升' + this.dataXinfangCases(xingfangList)["percent"] +
											'%';
									} else if (rtn.change == 'DOWN') {
										return '{value|' + value + '\n}信访案件同比下降' + this.dataXinfangCases(xingfangList)["percent"] +
											'%';
									} else {
										return '数据无法比较';
									}
								},
								rich: {
									value: {
										fontSize: 20,
										fontWeight: 'bolder',
									},
									persent: {
										fontSize: 60,
										fontWeight: 'bolder',
									},

								}
							}
						},
						// right
						{
							name: 'gauge people',
							type: 'gauge',
							radius: '80%',
							min: 0,
							max: Math.ceil(this.dataXinfangCases(xingfangList)["NUM"] / maxNum) * maxNum,
							startAngle: 200,
							endAngle: -20,
							center: ['75%', '70%'],
							axisLine: {
								lineStyle: {
									width: 15
								},
								color: ['#1E90FF'],
								roundCap: true
							},
							axisLabel: {
								formatter: function(value) {
									if (value % (maxNum / 5) === 0) {
										return '';
									}
									return value;
								}
							},
							splitLine: {
								show: false,
								length: 0,
								lineStyle: {
									width: 2,

								}
							},
							axisTick: {
								show: false
							},
							progress: {
								show: true,
								width: 15,
								itemStyle: {
									//color: '#fff'
								},
								roundCap: true
							},
							axisTick: {
								show: false
							},

							detail: {

								fontSize: '10',
								formatter: function(value) {
									var rtn = this.dataXinfangPeaple(xingfangList)
									if (rtn.change == 'UP') {
										return '{value|' + value + '\n}信访人数同比上升' + this.dataXinfangPeaple(xingfangList)["percent"] +
											'%';
									} else if (rtn.change == 'DOWN') {
										return '{value|' + value + '\n}信访人数同比下降' + this.dataXinfangPeaple(xingfangList)["percent"] +
											'%';
									} else {
										return '数据无法比较';
									}
								},
								rich: {

									value: {
										fontSize: 20,
										fontWeight: 'bolder',
									},
									persent: {
										fontSize: 60,
										fontWeight: 'bolder',
									},


									a: {
										fontSize: 14,
										fontWeight: 800,
										fontFamily: "Arial",
										lineHeight: 22,
										color: '#fff',
										align: 'left'
									},
									b: {
										fontWeight: 600,
										fontFamily: "Arial",
										lineHeight: 22,
										color: '#fff',
										align: 'left'
									}
								}
							},
							data: [{
								value: this.dataXinfangPeaple(xingfangList)["NUM"],
							}]
						},

					]
				};
				var optionXinfangPie = {
					title: {
						text: '{a|其中}' + this.dataXinfangMax(xingfangList)[0].name + "{a|类型案件占比最大,}" + "{a|约}" + this
							.dataXinfangMax(
								xingfangList)[0].value + '{a|%}',
						top: 'center',
						right: '10%',
						show: true,
						textStyle: {
							color: 'orange',
							fontSize: 14,
							fontWeight: 'bolder',
							lineHeight: 10,
							rich: {
								a: {
									verticalAlign: 'center',
									color: 'black',
									fontWeight: 'normal',
									fontSize: 10,
									lineHeight: 10
								},
							}
						}
					},
					series: // 饼图
					{
						name: 'Max pie',
						type: 'pie',
						name: '访问来源',
						type: 'pie',
						radius: '50%',
						center: ['15%', '50%'],
						data: this.dataXinfangMax(xingfangList),
						label: {
							show: false,
							fontSize: '8',
							fontWeight: 'bold'
						},
						lableline: {
							show: false
						},
						emphasis: {
							label: {
								show: false,
								fontSize: '8',
								fontWeight: 'bold'
							},
							lableline: {
								show: false
							}
						},
					}
				}

				// myXinfangPie.setOption(optionXinfangPie);
				// myXinfangCharts.setOption(optionXinfang);


				XinfangChart.setOption(optionXinfang);
				XinfangPie.setOption(optionXinfangPie);
				// 根据页面大小自动响应图表大小
				window.addEventListener("resize", function() {
					XinfangChart.resize();
					XinfangPie.resize();
				});

			},
			dataArea(List) {
				var ReturnList = [];
				var xAxisList = [];
				var seriesList = [];
				angular.forEach(List, function(obj, index) {
					xAxisList.push(obj.ITEM_FULL_VALUE);
					seriesList.push(obj.NUM);
				})
				ReturnList.push(xAxisList);
				ReturnList.push(seriesList);
				return ReturnList;
			},
			initAreaList() {
				const AreaChart = this.$echarts.init(document.getElementById("AreaChart"));
				var optionArea = {
					title: {
						text: '区域排名',
						left: 'left',
						textStyle: {
							color: '#5882FA',
						},
						show: true,
					},
					grid: {
						height: '120',
					},
					xAxis: {
						type: 'category',
						data: this.dataArea(this.xo.areaList)[0],

						axisLabel: {
							interval: 0,
							fontSize: '10',
							formatter: function(value) {
								if (value.length > 5) {
									var valueStr = value;
									for (var i = 0; i < value.length / 2; i++) {
										valueStr = valueStr.slice(0, 3 * i + 2) + '\n' + valueStr.slice(3 * i + 2);
										console.log(valueStr);
									}
									return valueStr;
								}
								return value.split('').join('\n');
							}
						}
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: this.dataArea(this.xo.areaList)[1],
						type: 'bar'
					}]
				}

				// myAreaChart.setOption(optionArea);

				AreaChart.setOption(optionArea);
				// 根据页面大小自动响应图表大小
				window.addEventListener("resize", function() {
					AreaChart.resize();
				});
			},
			backfn() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	@import '../../style/documentmanage.scss';

	.mainPge .page-content {
		margin-top: 0;
	}

	.picker-view {
		padding: 15rpx;
		border: 1px solid #eee;
		border-radius: 8rpx;
	}
</style>